<%--
  Created by IntelliJ IDEA.
  User: lqs
  Date: 2023/10/9
  Time: 14:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/js/echarts1.js"></script>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">

    <style>
        .block {
            width: 700px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 10px;

        }
        .demonstration{
            margin-top: 10px;
        }

        div{
            background-color: #f8f7e7;
        }
    </style>
</head>
<body>
<div id="app">

    <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="搜索" name="1" id="one">
            <div class="block" style="display: flex">
                <span class="demonstration">日期范围:</span>

                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <div>&nbsp;</div>
                <el-button type="primary" icon="el-icon-search" @click="select">搜索</el-button>

                <el-button type="primary" icon="el-icon-search" @click="cz">重置</el-button>
            </div>
        </el-collapse-item>
        <el-collapse-item title="营销额预览排行" name="2">
            <div style="display: flex">
            <div id="box" style="width: 800px;height:400px;">

            </div>
            <div id="box2" style="width: 850px;height:400px;">

            </div>
            </div>
        </el-collapse-item>
        <el-collapse-item title="商品销量预览排行" name="3">
            <div id="box3" style="width:1600px;height:800px;">

            </div>
        </el-collapse-item>
    </el-collapse>

</div>
 <script>
     let app = new Vue({
         el:"#app",
         data:{
             activeNames: ['1','2','3'],
             value1:[]
         },
         created(){
             //  初始化商品表格
             console.log(this.value1)
             this.init();
             this.initCharts();
             this.initCharts2();
             this.initCharts3()

         },
         methods:{
             handleChange(val) {
             },
             init(){
                 this.initCharts();
                 this.initCharts2();
                 this.initCharts3()
             },
             //日历确认按钮
             select(){
                 this.initCharts();
                 this.initCharts2();
                 this.initCharts3()

             },
             //日历重置
             cz(){
                 this.value1 =[];
             },
             initCharts(){

                 axios.post("/sta/trade",this.value1).then(function (resp){
                     var myChart = echarts.init(document.getElementById('box'));
                     myChart.setOption(
                         {
                             tooltip: {
                                 trigger: 'item'
                             },
                             legend: {
                                 top: '5%',
                                 left: 'center'
                             },
                             series: [
                                 {
                                     name: 'Access From',
                                     type: 'pie',
                                     radius: ['40%', '70%'],
                                     avoidLabelOverlap: false,
                                     itemStyle: {
                                         borderRadius: 10,
                                         borderColor: '#fff',
                                         borderWidth: 2
                                     },
                                     label: {
                                         show: false,
                                         position: 'center'
                                     },
                                     emphasis: {
                                         label: {
                                             show: true,
                                             fontSize: 40,
                                             fontWeight: 'bold'
                                         }
                                     },
                                     labelLine: {
                                         show: false
                                     },
                                     data: resp.data.data
                                 }
                             ]
                         }
                     )
                 })
             },

             initCharts2(){
                 axios.post("/sta/byBranch",this.value1).then(function (resp){
                     var myChart = echarts.init(document.getElementById('box2'));
                     myChart.setOption(
                         {
                             title: {
                                 text: '分店营销统计',
                                 subtext: '实时更新',
                                 left: 'center'
                             },
                             tooltip: {
                                 trigger: 'item'
                             },
                             legend: {
                                 orient: 'vertical',
                                 left: 'left'
                             },
                             series: [
                                 {
                                     name: 'Access From',
                                     type: 'pie',
                                     radius: '50%',
                                     data: resp.data.data,
                                     emphasis: {
                                         itemStyle: {
                                             shadowBlur: 10,
                                             shadowOffsetX: 0,
                                             shadowColor: 'rgba(0, 0, 0, 0.5)'
                                         }
                                     }
                                 }
                             ]
                         }
                     )
                 })
             },
             initCharts3(){
                 axios.post("/sta/byGoods",this.value1).then(function (resp){
                     var myChart = echarts.init(document.getElementById('box3'));
                     myChart.setOption(
                         {
                             xAxis: {
                                 type: 'category',
                                 data: resp.data.data[0]
                             },
                             yAxis: {
                                 type: 'value'
                             },
                             series: [
                                 {
                                     data: resp.data.data[1],
                                     type: 'bar'
                                 }
                             ]
                         }
                     )
                 })
             }
         }
     })
 </script>

</body>
</html>
